<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系统过滤器的使用</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>
<style>
.sort{
    cursor: pointer;
}
.sort:after {
    /* 上三角 */
  content: '\25b2';  
}
.sort.reverse:after {
    /* 下三角 */
  content: '\25bc';
}
</style>
<body ng-app="app">
       <div class="container jumbotron" ng-controller="demoCtrl">
           <h2>胡润百富榜
                <small>部分成员</small>
           </h2>
           <!-- ng-submit="方法()":阻止表单默认行为，调用我们的自定义函数 -->
           <form ng-submit="search($event)" class="form-inline">
                <div class="form-group">
                    <input type="text" ng-keyup="search($event)" id="keyword" class="form-control" placeholder="输入姓名进行搜索"> 
                    <!-- <button ng-click="search($event)" class="btn btn-primary">搜索</button> -->
                    <input type="submit" class="btn btn-success" value="搜索">
                </div>
           </form>
           <br>
           
           <table class="table table-hover" ng-style="{background:'#FFF'}">
           
               <tr>
                   <th>No.</th>
                   <th ng-click="sorted('name')" ng-style="{cursor:'pointer'}" >
                        姓名 
                        <span ng-show="attr=='name'"  class="label label-primary sort" ng-class="{reverse:reverse}" > </span>
                   </th>
                   <th ng-click="sorted('birthday')" ng-style="{cursor:'pointer'}" >
                       出生年月
                       <span ng-show="attr=='birthday'"  class="label label-primary sort" ng-class="{reverse:reverse}" > </span>
                   </th>
                   <th>地址</th>
                   <th>公司</th>
                   <th ng-click="sorted('money')" ng-style="{cursor:'pointer'}" >
                        财富
                        <span ng-show="attr=='money'"  class="label label-primary sort" ng-class="{reverse:reverse}" ng-click="sorted('money')"> </span>
                   </th>
                   <th>人生格言</th>
               </tr>
          
               <tr ng-repeat="item in superMan | filter :{name:name} | orderBy:attr:reverse">
                    <td>{{$index+1}}</td>
                    <td>{{item.name|lowercase}}</td>
                    <td>{{item.birthday|date:'yyyy/MM/dd'}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.company}}</td>
                    <td>{{item.money|currency:'$'}}</td>
                    <td>{{item.motto|limitTo:12:0}}...</td>
                </tr>
          </table>
       </div> 

       <!-- <div ng-controller="demo2Ctrl"></div> -->
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script>
<script>
    var app=angular.module('app',[]);
    app.run(function($rootScope){
        $rootScope.globalTitle='我是全局Title';
    });
    app.controller('demoCtrl',['$scope','$rootScope','$filter',function($scope,$rootScope,$filter){
        console.log($rootScope.globalTitle);
        $scope.attr = 'name';
        $scope.reverse=false;

        $scope.sorted=function(attr){
            $scope.attr=attr;
            $scope.reverse=$scope.attr==attr?!$scope.reverse:true;
        }

        $scope.name="";
        $scope.search=function(event){
            console.log(event.type)
            if(event.type=='keyup'){
                if(event.keyCode==13){
                    var keyword=angular.element(document.getElementById('keyword')).val();
                    $scope.name=keyword;
                }
            }else if(event.type=='click'||event.type=='submit'){
                var keyword=angular.element(document.getElementById('keyword')).val();
                $scope.name=keyword;
            }
            
        }
        $scope.superMan=[
            {
                name:'jack ma',
                company:'阿里巴巴集团',
                money:400000000,
                birthday:new Date('1967-01-01'),
                address:'中国杭州',
                motto:'这辈子做的罪错的是就是创建阿里巴巴',
                status:false
            },
            {
                name:'jianlin wang',
                company:'大连万达集团',
                money:380000000,
                birthday:new Date('1950-01-01'),
                address:'中国大连',
                motto:'先给自定一个能实现的小目标，比如先赚他一个亿',
                status:false
            },
            {
                name:'pony ma',
                company:'深圳腾讯计算机信息技术有限公司',
                money:360000000,
                birthday:new Date('1972-01-01'),
                address:'中国深圳',
                motto:'微信是一种生活方式',
                status:true
            },
            {
                name:'robin li',
                company:'百度网讯信息技术有限公司',
                money:200000000,
                birthday:new Date('1968-01-01'),
                address:'中国北京',
                motto:'科技改变命运，时事造就英雄',
                status:true
            },
            {
                name:'jun lei',
                company:'小米科技',
                money:200000000,
                birthday:new Date('1971-01-01'),
                address:'中国北京',
                motto:'小米手机，为发烧而生',
                status:true
            },
            {
                name:'hongyi zhou',
                company:'奇虎360',
                money:60000000,
                birthday:new Date('1969-01-01'),
                address:'中国北京',
                motto:'造自己的手机，让别人去说吧',
                status:true
            },
            {
                name:'yueting jia',
                company:'法拉第未来',
                money:80000000,
                birthday:new Date('1972-01-01'),
                address:'美国加利福尼亚',
                motto:'FF91开辟汽车新生态，它不仅仅是一辆电动汽车',
                status:true
            },
            {
                name:'yonghao luo',
                company:'锤子科技',
                money:90000000,
                birthday:new Date('1968-01-01'),
                address:'中国北京',
                motto:'锤子手机，你值得拥有',
                status:true
            },
        ];

        //控制器中使用filter过滤器    
        $scope.superMan.forEach((element,index,array) => {
            $scope.superMan[index]['name']=$filter('uppercase')(element.name);
        });
        // console.log($scope.superMan);
    }]);

    app.controller("demo2Ctrl",['$scope','$rootScope',function($scope,$rootScope){
           console.log($rootScope.globalTitle); 
    }]);
</script>
</html>